@import "./variables";

//浮动
.float-r {
    float: right;
  }
  
  //浮动
  .float-l {
    float: left;
  }
  
  // 字体加粗
  .fw-b {
    font-weight: bold;
  }
  
  //文章一行显示，多余省略号显示
  .title-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .bg-color-black {
    background-color: rgba(19, 25, 47, 0.6);
  }
  
  .bg-color-blue {
    background-color: #1a5cd7;
  }
  
  .colorBlack {
    color: #272727 !important;
  
    &:hover {
      color: #272727 !important;
    }
  }
  
  .colorGrass {
    color: #33cea0;
  
    &:hover {
      color: #33cea0 !important;
    }
  }
  
  .colorRed {
    color: #ff5722;
  
    &:hover {
      color: #ff5722 !important;
    }
  }
  
  .colorText {
    color: #d3d6dd !important;
  
    &:hover {
      color: #d3d6dd !important;
    }
  }
  
  .colorBlue {
    color: #257dff !important;
  
    &:hover {
      color: #257dff !important;
    }
  }
  
  //颜色
  @each $colorkey, $color in $colors {
    .text-#{$colorkey} {
      color: $color;
    }
  
    .bg-#{$colorkey} {
      background-color: $color;
    }
  }
  
  //对齐
  @each $var in (left, center, right) {
    .text-#{$var} {
      text-align: $var !important;
    }
  }
  
  //flex
  @each $key, $value in $flex-jc {
    .jc-#{$key} {
      justify-content: $value;
    }
  }
  
  @each $key, $value in $flex-ai {
    .ai-#{$key} {
      align-items: $value;
    }
  }
  
  //字体
  @each $fontkey, $fontvalue in $font-sizes {
    .fs-#{$fontkey} {
      font-size: $fontvalue * $base-font-size;
    }
  }
  
  //.mt-1 => margin top
  //spacing
  
  @each $typekey, $type in $spacing-types {
    //.m-1
    @each $sizekey, $size in $spacing-sizes {
      .#{$typekey}-#{$sizekey} {
        #{$type}: $size * $spacing-base-size;
      }
    }
  
    //.mx-1
    @each $sizekey, $size in $spacing-sizes {
      .#{$typekey}x-#{$sizekey} {
        #{$type}-left: $size * $spacing-base-size;
        #{$type}-right: $size * $spacing-base-size;
      }
  
      .#{$typekey}y-#{$sizekey} {
        #{$type}-top: $size * $spacing-base-size;
        #{$type}-bottom: $size * $spacing-base-size;
      }
    }
  
    //.mt-1
    @each $directionkey, $direction in $spacing-directions {
      @each $sizekey, $size in $spacing-sizes {
        .#{$typekey}#{$directionkey}-#{$sizekey} {
          #{$type}-#{$direction}: $size * $spacing-base-size;
        }
      }
    }
  
    .#{$typekey} {
      #{$type}: 0;
    }
  }
  